<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <th:block th:replace="reader/common :: heads"></th:block>
</head>
<body>

<th:block th:replace="reader/common :: navbar"></th:block>

<main class="page blog-post-list">
    <section class="clean-block clean-blog-list dark">
        <div class="container">
            <div class="block-heading" style="background-image:url(&quot;/reader/img/search_bg.jpg&quot;);">
                <nav class="navbar navbar-light navbar-expand-md navigation-clean-search"
                     style="background-color:rgba(255,255,255,0.65);">
                    <div class="container">
                        <div class="row">
                            <div class="col-2"></div>
                            <div class="col-8">
                                <div id="navcol-1" class="collapse navbar-collapse">
                                    <form target="_self" class="form-inline mr-auto" style="">
                                        <div class="form-group" style="margin: 35px; width: 743px;">
                                            <label><i class="fa fa-search" style="font-size: 36px; color: rgb(0, 123, 255);"></i></label>
                                            <input id="search-box" type="search" th:value="${query}" class="form-control" style="width: 80%; height: 36px; margin: 9px;">
                                            <button id="search-btn" type="button" class="btn btn-primary">Search</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>

            <div class="block-content">
                <div>
                    <div class="container">

                        <div class="row">
                            <table class="table table-hover">
                                <!-- TODO: remove token -->
                                <tbody id="search-body">
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
    </section>
</main>


<th:block th:replace="reader/common :: footer"></th:block>
<th:block th:replace="reader/common :: scripts"></th:block>
<th:block th:replace="reader/common :: search-templates"></th:block>

<script>
    let source = document.getElementById("search-result-template").innerHTML;
    let template = Handlebars.compile(source);

    let searchingWords = Handlebars.compile($("#searching-words").html());
    let emptyWords = Handlebars.compile($("#empty-words").html());
    let errorWords = Handlebars.compile($("#error-words").html());

    $("#search-btn").bind("click", function () {
        let formData = new FormData();
        if ($("#search-box").val() == ""){
            alert("con not be empty");
            return;
        }

        formData.append("title", $("#search-box").val());

        for (elem of $("#search-body").children()) elem.remove();
        $("#search-body").append(searchingWords(""));

        $.ajax({
            url: "/api/search/book/description",
            type: "POST",
            dataType: "json",
            data: formData,
            processData: false,
            contentType: false,
            success: function (resp){
                for (elem of $("#search-body").children()) elem.remove();

                if (resp.data.length == 0)
                    $("#search-body").append(emptyWords(""));
                for (elem of resp.data) {
                    $("#search-body").append(template(elem));
                }
                // window.location.href="/search-detail.html";
            },
            error: function (resp) {
                for (elem of $("#search-body").children()) elem.remove();

                console.log(resp);
                $("#search-body").append(errorWords(resp.responseJSON));
            }
        });
    })
</script>

<script>
    let query="[[${query}]]";

    if (query != "")
        $("#search-btn").click();
</script>


</body>
</html>